<template>
  <view class="page" :style="{height:scrollHeight}">
    <!-- <view class="cu-custom bg-white solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
      <view class="cu-bar bg-white fixed solid-bottom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
        <view class="search-form round" @tap="navToSearch" style="height: 64rpx;">
          <text class="cuIcon-search"><text class="padding-sm placeholderStyle">搜索你想要的商品</text></text>
        </view>
      </view>
    </view> -->

    <view style="height:100%;" class="content solid-top">
      <!-- 左边tab栏开始 -->
      <scroll-view class="left" scroll-y :style="{height:scrollHeight}">
        <view style="height: 10rpx;width: 100%;" :style="{background: currentIndex == 0?'#ffffff':''}"></view>
        <block v-for="(item, index) in lists" :key="index">

          <view class="item text-center" :class="{ active: index == currentIndex}" @click="handleSelect(item, index)">
            {{ item.name }}
            <view class="cuIconlujing226"></view>
          </view>
        </block>
      </scroll-view>
      <!-- 左边tab栏结束 -->
      <!-- 右边列表开始 -->
      <view class="right">
        <scroll-view class="classify-box" :style="{height:scrollHeight}" scroll-y :scroll-top="scrollTop" :scroll-into-view="scrollViewId"
          @scroll="onScroll" :scroll-with-animation="true">
          <block v-for="(item, i) in lists" :key="item.id">
            <view v-if="item.child && item.child.length > 0" class="cateRightBox2" :id="'po'+i">
              <view class="cateRightBox">
                <view class=" flex align-center text-333  fu-cate-block">
                  <text>{{ item.name }}</text>
                </view>
                <view class="cu-list grid col-3 no-border">
                  <view class="cu-item flex justify-center align-center" v-for="ele in item.child" :key="ele.id"
                    @click="navToList(ele.name,ele.id)">
                    <view class="block-120">
                      <fu-image radius="8rpx" :src="ele.thumb" :mode="'aspectFill'" lazy-load></fu-image>
                    </view>
                    <text class="text-333 text-name">{{ ele.name }}</text>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
      <!-- 右边列表结束 -->
    </view>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        scrollViewId: '',
        scrollTop: 0,
        CustomBar: this.CustomBar, //状态栏高度
        StatusBar: this.StatusBar, //状态栏高度
        currentIndex: 0, //选中下标
        lists: [], //列表
        banners: [], //轮播图
        ad: [],// 轮播图广告
        topList: [],
        isLeftClick:false,
      };
    },
    props: {
    	//店铺+头部高度
    	topHeight: {
    		type: Number,
    		default: 0
    	}
    },
    computed: {
    	scrollHeight() {
    		return `calc(100vh - ${this.topHeight}px - 100rpx)`;
    	},
    },

    mounted() {
     this.loadData();
    },
    methods: {
      getNodesInfo() {
        this.$nextTick(() => {
          //小程序没有doucument和window对象(undefined)
          const query = uni.createSelectorQuery().in(this);
          query.selectAll(".cateRightBox2").boundingClientRect().exec(res => {
            let nodes = res[0];
            let arr = [];
            nodes.map(item => {
              arr.push(item.top);
            })
            this.topList = arr;
          })
        });
      },
      onScroll(e) {
        if(this.isLeftClick){
					this.isLeftClick=false;
					return;
				}
        // let tempTop = e.detail.scrollTop							//scroll期间赋值
        let tempTop = e.target.scrollTop;
        for (let i = 0; i < this.topList.length; i++) {
          let h1 = this.topList[i];
          let h2 = this.topList[i + 1];
          if (tempTop > h1 && tempTop < h2) {
            this.currentIndex = i;
          }
        }
      },

      /**
       * @event
       * @description  tab切换
       * @param {Number} item -当前选中数据  //暂时没用
       * @param {Number} index - 选中下标
       * @return {Boolean}
       * */
      handleSelect(item, index) {
        this.scrollViewId = "po" + index;
        this.currentIndex = index;
        this.isLeftClick=true;
        this.$nextTick(() => {
          this.scrollTop = 0
        });

      },
      /**
       * @event
       * @description  获取分类
       * @return {Boolean}
       * */
      loadData() {
        this.$api.post(global.apiUrls.get_shop_category, {
            partner_id: this.$store.state.partner_id ,//店铺id,
          }).then(res => {
          console.log('三级',res);
          if (res.data.code == 1) {
            let list = res.data.data;
            // 判断没有二级分类删除此分类
            list.forEach((item, index) => {
              if (!item.child) {
                list.splice(index, 1);
              }
              // 判断没有三级分类删除此分类
              if (this.filterEmpty(item.child)) {
                list.splice(index, 1);
              }
            });
            this.lists = list;
            this.getNodesInfo();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      },
      /**
       * @description 判断是否有子分类
       */
      filterEmpty(arr) {
        if (!arr) {
          return false;
        }
        let num = 0;
        arr.forEach(item => {
          if (!item.child) {
            num++;
          }
        });
        if (num == arr.length) {
          return true;
        } else {
          return false;
        }
      },
      /**
       * @event
       * @description  去分类列表页
       * @return {Boolean}
       * */
      navToList(name,cid) {
        // this.$urouter.navigateTo({
        //   url: '/pages/goods/goodslist/goods-search/index',
        //   params: {
        //     cid: cid,
        //     keyWords:name
        //   }
        // });
        // this.component = 'goods'
        console.log(8888)
          // this.$emit('change','goods');

        uni.setStorageSync('searchContent', name);

        this.$emit('cateHomeChange','goods');

      },
      /**
       * @event
       * @description  去搜索页面
       * @return {Boolean}
       * */
      navToSearch() {
        this.$urouter.navigateTo('/pages/index/search/search/index');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .text-333{
   color: #333333 !important;
  }

  .page {
    height: 100vh;
    background: #f8f8f8;
    overflow: hidden;

    .content {
      display: flex;

      .left {
        width: 204rpx;
        min-width: 204rpx;
        height: 100%;
        .item {
          width: 100%;
          // height: 100rpx;
          // line-height: 100rpx;
          padding:32rpx 0;
          transition: all 0.2s;
          font-size: 28rpx;
          color: #333333;
        }

        .item.active {
          font-size: 28rpx;
          // color: #F5271E;
          font-weight: 500;
          background: #FFFFFF;
          font-weight: bold;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 8rpx;
            height: 34rpx;
            float: left;
            background: #FF6464;
            border-radius: 4rpx;
          }
        }
      }

      .right {
        flex: 1;
        /* background-color: #FFFFFF; */
      }
    }
  }

  .right {
    height: 100%;
    display: flex;
    flex-direction: column;

    .one-ad {
      /* padding: 0 12px; */
      height: 164rpx;
      /* padding: 10rpx 20rpx 10rpx 20rpx; */
      border-radius: 0rpx;
      margin: 24rpx 0 32rpx;

      .ad-img {
        width: 100%;
        height: 100%;
        border-radius: 0rpx;
      }
    }

    .swiper-box {
      padding: 24rpx;

      .swiper {
        height: 180rpx;

        .swiper-item {
          .swiper-item-img {
            width: 100%;
            height: 100%;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .classify-box {
      height: 100%;
      padding: 0 20rpx;
      background: #fff;
      .block-120 {
        width: 146rpx;
        height: 146rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .cateRightBox {
        overflow: hidden;
        background: #fff;
        // margin-bottom: 20rpx;
        // border-radius: 16rpx;
        padding: 0 20rpx;

        /* &:nth-child(1) {
        border-radius: 0;
      } */
      }

      .cateRightBox2:last-child {
        padding-bottom: 20rpx;
      }
    }
  }

  .cu-bar .search-form {
    line-height: 52rpx;
    height: 52rpx;
  }

  .text-df {
    justify-content: left;
    align-items: left;

    view {
      width: 120rpx;
      height: 3rpx;
      background: #ccc;
      margin: 0 15rpx;
    }
  }

  .placeholderStyle {
    font-size: 26rpx;
    color: grey;
  }

  .block-24 {
    width: 24rpx;
    height: 24rpx;
    font-size: 24rpx;
  }

  .fu-cate-block {
    font-weight: bold;
    justify-content: space-between !important;
    padding-top: 32rpx;
    font-size: 28rpx;
    &:nth-child(1) {
       padding-top: 48rpx;
    }

    // padding-left: 24rpx;
  }

  .text-name {
    font-size: 24rpx !important;
  }
  .cu-list.grid.no-border>.cu-item{
    padding-top: 24rpx;
    padding-bottom: 0!important;
  }
  .cu-list.grid>.cu-item uni-text{
    margin-top: 16rpx;
  }
  .cu-list.grid.no-border{
    padding: 20rpx 0;
  }
</style>
